<template>
  <div class="container" >
    <div class="center">
      <div class="header">
        <img class="header-bg" :src="headerUrl" alt="">
        <div class="content">
            <open-data class="userinfo-avatar" type="userAvatarUrl"></open-data>
            <!-- <img class="userinfo-avatar" :src="avaterUrl" alt=""> -->
            <div class="userinfo">
                <h3 class="name">{{userInfo.UserName}}</h3>
                <p><span>{{userInfo.F_RoleName}}</span><span>{{userInfo.UserCode}}</span></p>
                <p>{{userInfo.F_OrganizeName}}</p>
            </div>
        </div>
      </div>

      <div class="cell-list">
        <wux-cell thumb="../../image/name.png" is-link url="/pages/center/roster" title="花名册" ></wux-cell>
        <wux-cell thumb="../../image/xiajigs.png" is-link title="公司设置" url="/pages/center/departmentSeeting"></wux-cell>
        <wux-cell thumb="../../image/baofei.png" is-link title="保费管理" url="/pages/center/premiumSummary"></wux-cell>
        <wux-cell thumb="../../image/log-out.png" is-link title="退出登录" @click="sureQuit"></wux-cell>
      </div>
    </div>
  </div>
</template>

<script>
import headerUrl from 'static/image/center-bg.png'
import avaterUrl from 'static/image/avater.png'
import { userInfo, logout } from 'api/api'
export default {
    data () {
        return {
            userInfo: {
                UserName: '',
                UserCode: ''
            },
            headerUrl,
            avaterUrl
        }
    },

    methods: {
        _userInfo () {
            userInfo()
                .then((res) => {
                    console.log(res)
                    this.userInfo = res.data
                })
        },
        getUserInfo () {
      // 调用登录接口
            wx.login({
                success: () => {
                    wx.getUserInfo({
                        success: (res) => {
                            this.userInfo = res.data.userInfo
                        }
                    })
                }
            })
        },
        sureQuit () {
            wx.showModal({
                title: '提示',
                content: '是否确认退出',
                success (res) {
                    if (res.confirm) {
                        var openId = wx.getStorageSync('openid')
                        // 解除微信绑定
                        logout(openId).then(res => {
                            console.log(res)
                        })
                        wx.removeStorageSync('token')
                        wx.removeStorageSync('openid')
                        const url = '../center/login?type=quit'
                        wx.navigateTo({ url })
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
        }
    },
    async onShow () {
        await this._userInfo()
    }
    // created () {
    // // 调用应用实例的方法获取全局数据
    //     this._userInfo()
    // }
}
</script>

<style lang='stylus'>
.center
    .header
        width 750rpx
        height 305rpx
        position relative
        .header-bg
            position absolute
            top: 0
            bottom 0
            left: 0
            width 750rpx
            height 302rpx
        .content
            position absolute
            top 0
            display: flex
            padding 85rpx 0 0 50rpx
            box-sizing border-box
            .wux-cell__thumb
                width 28rpx
            .userinfo-avatar
                width: 110rpx
                height: 110rpx
                border-radius: 50%
                border 3rpx solid #fff
                margin-right 22rpx
                overflow:hidden
            .userinfo
                font-size 23rpx
                color: #fff
                .name
                    font-size 32rpx
                    margin-bottom 12rpx
                p
                    line-height 32rpx
                    span
                        margin-right 18rpx

.cell-list
  box-sizing border-box
  width 750rpx
  padding 0 30rpx 0 10rpx
  background #fff


</style>
